﻿@using xiushen.Infrastructure
@model IEnumerable<xiushen.Domain.Attachment>
@{
    ViewBag.Title = "图片赏析";
}
<ul class="breadcrumb">
    <li><a href="@Url.Action("BrowserPics")">图片浏览</a> <span class="divider">/</span> </li>
   
</ul>

        <style>

            /* Demo styles */
            html,body{background:#fff;margin:0;}
            body{border-top:4px solid #000;}
            .content{color:#777;font:12px/1.4 "helvetica neue",arial,sans-serif;width:1232px;margin:0px auto;}
            p{margin:0 0 20px}
            a {color:#22BCB9;text-decoration:none;}
            .cred{margin-top:20px;font-size:11px;}

            /* This rule is read by Galleria to define the gallery height: */
            #galleria{ height: 600px;width: 1200px;}

        </style>

     
        <!-- load Galleria -->
       
    
    <div class="content">
       
        <!-- Adding gallery images. We use resized thumbnails here for better performance, but it’s not necessary -->
           <h2></h2>
        <div id="galleria">
        @foreach (var data in Model)
        {
            <a href="@data.Url()">
                <img data-title="@data.DisplayName"
                     data-description="@data.Description"
                     src="@data.Url()">
                     <div>@data.Description</div>
            </a>
        }
           
         
        </div>
        <div id ="description" style="font-size: 14px;padding-top: 20px;"></div>
    </div>

  
@section scripts
{
    <script src="~/Content/galleria/galleria/themes/../galleria-1.2.8.min.js"></script>
   
    <script type="text/javascript">
        
        $(function(){
            Galleria.loadTheme('../Content/galleria/galleria/themes/classic/galleria.classic.min.js');
            Galleria.run('#galleria');
            
         });
        // Load the classic theme

        // Initialize Galleria
         Galleria.ready(function () {

             this.bind("loadfinish", function (e) {
             
                     $("#description").text(e.galleriaData.description);
                     $("h2").text(e.galleriaData.title);
              

             });

             this.bind("loadstart", function (e) {
                 if (!e.cached) {
                     Galleria.log(e.target + ' is not cached. Begin preload...');
                 }
             });
         });

    </script>
}